<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.order_sn" placeholder="订单编号" clearable style="width: 200px;" class="filter-item" />
      <el-input v-model="listQuery.user_id" placeholder="用户ID" clearable style="width: 100px;" class="filter-item" />

      <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.a" :value="item.b" />
      </el-select>
      <!-- <el-select v-model="listQuery.type" placeholder="类型" style="width: 90px" class="filter-item">
        <el-option v-for="item in statuse" :key="item" :label="item" :value="item" />
      </el-select> -->
      <!-- <el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
      </el-select>
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select> -->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        查询
      </el-button>
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        Add
      </el-button> -->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        Export
      </el-button>
      <-->
      <!-- <el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        操作者
      </el-checkbox> -->
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">

      <el-table-column width="80px" align="center" label="用户ID">
        <template slot-scope="scope">
          <span style="color:#1890ff;" @click="showuser(scope.row.user_id)">{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100px" align="center" label="银行卡ID">
        <template slot-scope="scope">
          <span  style="color:#1890ff;" @click="showcarduser(scope.row.user_card_id)">{{ scope.row.user_card_id }}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="center" label="订单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.order_sn }}</span>
        </template>
      </el-table-column>
      <el-table-column width="180px" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.ctime | formatDate }}</span>
        </template>
      </el-table-column>



      <el-table-column width="100px" align="center" label="提现金额">
        <template slot-scope="scope">
          <span>{{ scope.row.account }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="备注">
        <template slot-scope="scope">
          <span>{{ scope.row.note||'-' }}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status|statusFn }}</span>
        </template>
      </el-table-column>

      <el-table-column  align="center" label="驳回意见">
        <template slot-scope="scope">
          <span>{{ scope.row.reject_msg||'-' }}</span>
        </template>
      </el-table-column>


      <el-table-column align="center" label="操作" width="220">
        <template slot-scope="scope">
          <!-- <router-link :to="'/report/edit/'+scope.row.id" >
            <el-button type="" size="small" icon="el-icon-edit">
              详情
            </el-button>
          </router-link> -->
          <template v-if="scope.row.status == 2">
            <el-button type="primary" size="small" @click="shenhe(scope.row)">
              通过
            </el-button>
            <el-button type="danger" size="small" @click="bohui(scope.row)">
              驳回
            </el-button>
          </template>

          <template v-else>
            <div class="">
              -
            </div>
          </template>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :visible.sync="czimgbig" title="用户详情" v-loading="userloading">
      <el-form >
        <el-row>
          <el-col :span="9">

            <el-form-item label="用户名">
              <el-input   v-model="userData.nickname"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="用户积分">
              <el-input  v-model="userData.unit" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="手机号">
              <el-input  v-model="userData.mobile"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="余额">
              <el-input v-model="userData.banlace"  />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form >

    </el-dialog>

    <el-dialog :visible.sync="cardUser" title="银行卡" v-loading="userloading">
      <el-form >
        <el-row>
          <el-col :span="9">

            <el-form-item label="姓名">
              <el-input   v-model="cardUserData.card_name"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="开户行">
              <el-input  v-model="cardUserData.card_bank" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="卡号">
              <el-input  v-model="cardUserData.card_number"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">

          </el-col>
        </el-row>

      </el-form >

    </el-dialog>




    <el-dialog title="订单驳回" :visible.sync="isbohui">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="驳回原因" prop="username">
          <el-input v-model="bohuistr" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isbohui = false">
          取消
        </el-button>
        <el-button type="primary" @click="bohuimain()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export { parseTime, formatTime } from '@/utils'
import { fetchreportList, fetchreportListUpdata, txListbohui, reportListbohiu, fetchreporttkList, fetchtxListUpdata } from '@/api/article'

import { withdrawalList, saveWithdrawal, delWithdrawal, getUserInfoByOrder,getUserCardByInfo } from '@/api/order'

import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {
    statusFn(s){
      if(s == 2)return '待审核';
      if(s == 3)return '驳回';
      return '已通过';
    },
    formatDate(time) {
      console.log(time)
      return __.formatDate(new Date(time - 0), 'yyyy-MM-dd hh:mm:ss')
    }
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'info',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // }
  },
  data() {
    return {
      cardUser:false,
      cardUserData:{},
      list: null,
      total: 1,
      czimgbig: false,
      userData: {},
      userloading: false,
      czimgbigsrc: '',
      listLoading: true,
      // importanceOptions: ['充值', '提款'],
      // statuse: ['待审核', '已完成', '未通过'],
      calendarTypeOptions: [{a: '待审核',b:2},{a: '已通过',b:1},{a: '驳回',b:3}],
      isbohui: false,
      bohuistr: '',
      bohuidata: null,
      listQuery: {
        page: 0,
        order_sn: undefined,
        status: undefined,
        user_id: undefined,
        limit: 20
      }
    }
  },
  watch: {
    // 'listQuery.status'(a, b) {
    //   this.getList()
    // }
  },
  created() {
    this.getList()
  },
  methods: {
    showcarduser(id){
      this.userloading = true;
      getUserCardByInfo({id}).then(res=>{
        console.log(res,'-----------')
        this.cardUserData = res;
        this.cardUser = true
        this.userloading = false
      })
    },
    showuser(id){
      this.userloading = true;
      getUserInfoByOrder({id}).then(res=>{
        this.userData = res;
        this.czimgbig = true
        this.userloading = false
      })
    },
    showimgbig(src) {
      this.czimgbigsrc = src
      this.czimgbig = true
    },
    shenhe(data) {
      this.listLoading = true
      data['status'] = '1';
      saveWithdrawal(data).then(response => {
        // this.list = response.data.items
        // this.total = response.data.total
        // this.listLoading = false
        this.getList()
      })
      return false
    },
    bohuimain() {
      if (!this.bohuistr) {
        return this.$message({
          message: '请填写驳回原因',
          type: 'error'
        })
      }
      const data = this.bohuidata
      this.listLoading = true
      data['status'] = '3'
      data['reject_msg'] = this.bohuistr
      saveWithdrawal(data).then(response => {
        // this.list = response.data.items
        // this.total = response.data.total
        // this.listLoading = false
        this.isbohui = false
        this.bohuistr = ''
        this.bohuidata = null
        this.getList()
      })
    },
    bohui(data) {
      this.isbohui = true
      this.bohuidata = data
      // console.log(data)
      // return false;
    },
    handleCreate(){
      saveWithdrawal({
        user_id:2,
        user_card_id: 1,
        account: 20
      }).then(response => {
        // this.list = response.data.items
        // this.total = response.data.total
        // this.listLoading = false
      })
    },
    getList() {
      this.listLoading = true
      withdrawalList(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.count
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
